import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { changeActive, getChannels } from "../store/actions/channel";
import { RootState } from "../types/store";
export default function Channel() {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getChannels());
  }, [dispatch]);
  const { channels, active } = useSelector((state: RootState) => state.channel);
  const handleClickChannel=(id:number)=>dispatch(changeActive(id))
  return (
    <ul className="catagtory">
      {channels.map((item) => {
        return (
          <li
            key={item.id}
            className={item.id === active ? "select" : ""}
            onClick={() => handleClickChannel(item.id)}
          >
            {item.name}
          </li>
        );
      })}
    </ul>
  );
}
